<div id="typography-headings" class="p-24">

    <div class="mat-title">Material design typography classes</div>

    <div class="mat-card mat-elevation-z2 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">112px</div>
                <span class="mat-display-4">Display 4</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-display-4">Display 4</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">56px</div>
                <span class="mat-display-3">Display 3</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-display-3">Display 3</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">45px</div>
                <span class="mat-display-2">Display 2</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-display-2">Display 2</span>
                </textarea>
            </base-highlight>
        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">34px</div>
                <span class="mat-display-1">Display 1</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-display-1">Display 1</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">24px</div>
                <span class="mat-headline">Headline</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-headline">Headline</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">20px</div>
                <span class="mat-title">Title</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-title">Title</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">16px</div>
                <span class="mat-subheading-2">Subheading 2</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-subheading-2">Subheading 2</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">15px</div>
                <span class="mat-subheading-1">Subheading 1</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-subheading-1">Subheading 1</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">14px</div>
                <span class="mat-body-1">Body 1</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-body-1">Body 1</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">14px</div>
                <span class="mat-body-2">Body 2</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-body-2">Body 2</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">12px</div>
                <span class="mat-caption">Caption</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <span class="mat-caption">Caption</span>
                </textarea>
            </base-highlight>

        </div>

    </div>

    <div class="mat-title mt-64">Standard Headings</div>

    <div class="mat-card mat-elevation-z2 p-24" fxLayout="column">

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">24px</div>
                <span class="h1">Heading 1</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <h1>Heading 1</h1>
                    <span class="h1">Heading 1</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">20px</div>
                <span class="h2">Heading 2</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <h2>Heading 2</h2>
                    <span class="h2">Heading 2</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">16px</div>
                <span class="h3">Heading 3</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <h3>Heading 3</h3>
                    <span class="h3">Heading 3</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">15px</div>
                <span class="h4">Heading 4</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <h4>Heading 4</h4>
                    <span class="h4">Heading 4</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">13px</div>
                <span class="h5">Heading 5</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <h5>Heading 5</h5>
                    <span class="h5">Heading 5</span>
                </textarea>
            </base-highlight>

        </div>

        <div fxLayout="column" fxLayout.gt-md="row">

            <div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
                <div class="mat-caption secondary-text">12px</div>
                <span class="h6">Heading 6</span>
            </div>

            <base-highlight lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
                       fxFlex="50">
                <textarea #source hidden="hidden">
                    <h6>Heading 6</h6>
                    <span class="h6">Heading 6</span>
                </textarea>
            </base-highlight>

        </div>

    </div>

</div>